<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading" @selection-change="tableSelection">
      <el-table-column type="selection"></el-table-column>
      <el-table-column align="center" label="ID" width="200" element-loading-text="请给我点时间！">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="400" align="center" label="角色名">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="状态" width="300">
        <template slot-scope="scope">
          <!-- 角色状态 1 待提交  2 待审核  3审核通过 4 审核不通过-->
          <span v-if="scope.row.status == 1">待提交</span>
          <span v-else-if="scope.row.status == 2">待审核</span>
          <span v-else-if="scope.row.status == 3">审核通过</span>
          <span v-else-if="scope.row.status == 4">审核不通过</span>
          <span v-else>未知状态{{scope.row.status}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="创建时间" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="操作" width="450">
        <template slot-scope="scope">
          <span v-if="['1','4'].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)" label="查看"/>
            <kt-button type="text" class="textButton" @click="updateBtnShow(scope.row)" label="编辑"/>
            <kt-button type="text" class="textButton" @click="deleteActivity(scope.row)" label="删除"/>
            <kt-button type="text" class="textButton"  @click="submitReview(scope.row)" label="提交审核"/>
          </span>
          <span v-else-if="['2'].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)" label="查看"/>
            <kt-button type="text" class="textButton" @click="revokeReview(scope.row)" label="撤销提交"/>
            <kt-button type="text" class="textButton" @click="reviewSysRole(scope.row)" label="审核"/>
          </span>
          <span v-else-if="['3'].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)" label="查看"/>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="listQuery.start"
        :page-size="listQuery.limit"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>


    <!-- 审核弹窗 -->
    <el-dialog class="el-dialog-style" title="审核" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="verifyForm">
          <el-form-item label="审核结果：" label-width="125px" prop="status">
            <el-radio-group v-model="verifyForm.status">
              <el-radio :label="3">审核通过</el-radio>
              <el-radio :label="4">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核不通过原因：" label-width="125px">
              <el-input :rows="4" clearable v-model="verifyForm.remark" autocomplete="off" type="textarea" style="min-height: 33px; max-width: 75%; "></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="dialogFormVisible = false" size="mini" class="cancelButton">取消</el-button>
            <el-button type="primary" @click="reviewDialog()" size="mini" class="searchButton">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
export default {
  components: {
    KtButton
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  props: {
    type: {
      type: String,
      default: "0"
    },
    parentFilters: {
      type: Object
    }
  },
  data() {
    return {
      list: [],

      listQuery: {
        start: 1,
        limit: 10,
        status: this.type,
      },
      loading: false,
      totalSize: 0,
      dialogFormVisible: false,
      verifyForm:{
        status:null,
        remark:""
      },
      selection: [],
    };
  },
  created() {
    this.findPage();
  },
  methods: {
    
    tableSelection(val) {
      this.selection = val;
    },
    findPage() {
      this.loading = true;
      this.$emit("create"); // for test
      let _filters = JSON.parse(JSON.stringify(this.parentFilters));

      _filters["start"] = this.listQuery.start;
      _filters["limit"] = this.listQuery.limit;
      _filters["status"] = this.listQuery.status;
      if (_filters.status == "0") {
        _filters.status = "";
      }
      let this_ = this;
      this.utils.request.queryPageSysRole(_filters, function(res) {
        if (res.code == "0000") {
          this_.list = res.data.rows;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.list = [];
          this_.totalSize = 0;
        }
        this_.loading = false;
      });

      // })
    },
    //查看
    seeNewTab: function(params) {
      this.$router.push({path:"/SysRoleAdd/" + params.id + '/' + params.type + '/1' });
    },
    //编辑
    updateBtnShow(params){
      this.$router.push({path:"/SysRoleAdd/" + params.id + '/' + params.type+ '/0'});

    },
    // 1-2 提交审核 
    submitReview(val){
      let that = this; 
      this.$confirm('您确定要提交审核？', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //判断状态是否为待提交
        if(val.status != 1 && val.status != 4){
          that.$message({ message: "当前状态不可操作",   type: "warning"});
          return false;
        }
        that.utils.request.submitReview(val , res => {
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.findPage();
          }else if(res.code == "9999") {
            that.$message({ message: res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
    },
    // 2-1 撤销提交 
    revokeReview(val){
      let that = this; 
      this.$confirm('您确定要撤销提交？', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //判断状态是否为待审核
        if(val.status != 2){
          that.$message({ message: "当前状态不可操作",   type: "warning"});
          return false;
        }
        that.utils.request.revokeReview(val , res => {
          if(res.code == "0000"){
            that.$message({ message: "操作成功",   type: "success"});
            that.findPage();
          }else if(res.code == "9999") {
            that.$message({ message: + res.msg,   type: "error"});
          }
        });
      }).catch(() => {});
      
    },
    //3 审核
    reviewSysRole(val){
      //默认通过
      this.$nextTick(() => {
        this.verifyForm.status = 3;
        this.verifyForm.id = val.id;
        this.verifyForm.remark = '';
        this.verifyForm.type = false;
        this.dialogFormVisible = true;
      });
    },
    //审核弹窗
    reviewDialog(){
      let that = this;
      this.$confirm('您确定要审核？', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(that.verifyForm.type){
          that.utils.request.batchRoleReview(this.verifyForm, res=>{
            if(res.code == "0000"){
              that.$message({ message: "操作成功",   type: "success"});
              that.findPage();
              that.dialogFormVisible = false;
            }else if(res.code == "9999") {
              that.$message({ message: res.msg,   type: "error"});
            }
          });
        }else {
          that.utils.request.roleReview(this.verifyForm, res=>{
            if(res.code == "0000"){
              that.$message({ message: "操作成功",   type: "success"});
              that.findPage();
              that.dialogFormVisible = false;
            }else if(res.code == "9999") {
              that.$message({ message: res.msg,   type: "error"});
            }
          });
        }
      }).catch(() => {});
    },
    //删除
    deleteActivity: function(data) {
      this.$confirm('您确定要删除该角色？', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(data.id == 1){
          this.$message({message: '此角色无法删除', type: 'warning'});
          return false;
        }
        this.utils.request.deleteSysRole({id:data.id,roleName:data.roleName}, res=>{
          if(res.data){
            this.$message({message: '删除成功', type: 'success'});
            this.findPage();
          }else{
            this.$confirm('该角色已关联到账号，请解除关联后在进行操作', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {}).catch(() => {});
          }
        });
      }).catch(() => {});
    },
    // 换页刷新-start
    refreshPageRequest: function(pageNum) {
      this.listQuery.start = pageNum;
      this.findPage();
    },
    // 换页刷新-limit
    handleSizeChange: function(limit) {
      this.listQuery.limit = limit;
      this.listQuery.start = 1;
      this.findPage();
    },
  }
};
</script>
<style scoped>
.textButton {
  margin-left: 1px;
  border-color: transparent !important;
  background: transparent !important;
}
</style>

